<template>
    <div>
        <p>inital message：{{ message }}</p>
        <p>reversed message：{{ reversedMessage }}</p>
        <button @click="updateMessage">Update</button>
    </div>
</template>

<script setup>
    import {ref, computed} from 'vue'
    const message = ref('Hello World')
    const reversedMessage = computed(() => {
        message.value.split('').reverse().join('')
    })
    const updateMessage = () => {
        message.value = 'Hello World'
    }
</script>